@layout("/common/_container.html"){
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="point_range" style="height: 500px">

                    </div>
                </div>
            </div>
        </div>


        <div class="col-sm-4">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>已解决的问题</legend>
            </fieldset>
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">2017年12月，今年安规考试的成绩什么时候出来？</div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">2017年10月，去年我们公司的青创赛成绩如何？</div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">2017年9月，公司的春检计划出来了吗？</div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">2017年3月，营销转型的考核指标有哪些？</div>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">2017年2月，今年有谁准备考**证，求带</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>
<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/pie',
            'echarts/chart/map'
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('point_range'));

            var cityMap = {
                "旺苍县": "wangcang"
            };


            var curIndx = 0;
            var mapType = [];
            var mapGeoData = require('echarts/util/mapData/params');
            console.log(mapGeoData)
            for (var city in cityMap) {
                mapType.push(city);
                // 自定义扩展图表类型
                mapGeoData.params[city] = {
                    getGeoJson: (function (c) {
                        var geoJsonName = cityMap[c];
                        return function (callback) {
                            $.getJSON('/static/json/' + geoJsonName + '.json', callback);
                        }
                    })(city)
                }
            }
            option = {
                title: {
                    text : '旺苍供电公司',
                    subtext : '旺苍县 （滚轮或点击切换）'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}<br/>谁有供电所零序目录最新版？<br/>...'
                },
                series : [
                    {
                        name: '旺苍县地图',
                        type: 'map',
                        mapType: '广元市',
                        selectedMode : 'single',
                        hoverable: false,
                        roam:true,
                        data : [],
                        markPoint : {
                            symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
                            itemStyle: {
                                normal: {
                                    borderColor: '#87cefa',
                                    borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                                    label: {
                                        show: false
                                    }
                                },
                                emphasis: {
                                    borderColor: '#1e90ff',
                                    borderWidth: 5,
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            data : [
                                {name: "旺苍供电公司", value: 279},
                                {name: "红军城", value: 111},
                                {name: "政府机构", value: 397},
                                {name: "高阳镇", value: 197},
                                {name: "五红村", value: 99},
                                {name: "中山子", value: 111},
                                {name: "旺苍供电公司", value: 56}
                            ]
                        },
                        geoCoord: {
                            "旺苍供电公司":[106.299019,32.231052],
                            "红军城":[106.314125,32.236175],
                            "政府机构":[106.296389,32.235035],
                            "高阳镇":[106.262864,32.30852],
                            "五红村":[106.262864,32.30852],
                            "中山子":[106.224345,32.317552],
                            "旺苍供电公司":[106.302246,32.221076]
                        }
                    }
                ]
            };

            var ecConfig = require('echarts/config');
            var zrEvent = require('zrender/tool/event');
            document.getElementById('point_range').onmousewheel = function (e){
                var event = e || window.event;
                curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
                if (curIndx < 0) {
                    curIndx = mapType.length - 1;
                }
                var mt = mapType[curIndx % mapType.length];
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);
                zrEvent.stop(event);
            };
            myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
                curIndx++;
                var mt = mapType[curIndx % mapType.length];
                option.series[0].mapType = mt;
                option.title.subtext = mt + ' （滚轮或点击切换）';
                myChart.setOption(option, true);
            });

            // 为echarts对象加载数据
            myChart.setOption(option);

        }
    );
</script>
@}